<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户详情</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>

      <div class="deatil" style="display: flex">
        <div class="avatar">
          <el-image class="img" :src="info.avatar"></el-image>
        </div>
        <div class="info">
          <div class="item">
            <span>用户昵称</span>
            <span>{{ info.nickName }}</span>
          </div>
          <div class="item">
            <span>生日</span>
            <span>{{ info.birthday }}</span>
          </div>
          <div class="item">
            <span>电话号码</span>
            <span>{{ info.phonenumber }}</span>
          </div>

          <div class="item">
            <span>邮箱</span>
            <span>{{ info.email }}</span>
          </div>

          <!-- <div class="item">
            <span>登录密码</span>
            <span>{{info.password}}</span>
          </div>-->
          <div class="item">
            <span>注册时间</span>
            <span>{{ info.createTime }}</span>
          </div>
          <div class="item">
            <span>用户类别</span>
            <span>{{ info.userType | filterUserType }}</span>
          </div>
          <div class="item">
            <span>测评顾问</span>
            <span>{{ info.counselorName }}</span>
          </div>
          <div class="item">
            <span>测评截止日期</span>
            <span>{{ info.endEvaluateTime }}</span>
          </div>

          <div class="item">
            <span>用户简介</span>
            <span>{{ info.introduction }}</span>
          </div>
        </div>
        <div class="school" style="flex: 1">
          <div class="item">
            <span>所在年级</span>
            <span>{{ info.className }}</span>
          </div>
          <div class="item">
            <span>目标职业</span>
            <span style="margin: 0 10px">{{ info.goalJob1 }}</span>
            <span  style="margin: 0 10px">{{ info.goalJob2}}</span>
            <span  style="margin: 0 10px">{{ info.goalJob3 }}</span>
          </div>
          <div class="item">
            <span style="margin-right: 20px">发布权限</span>
            <el-switch
              v-model="switchValue"
              active-color="#13ce66"
              @change="updateDiaryFlag"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
          <div class="item">
            <span style="margin-right: 20px">官方标识</span>
            <el-switch
              v-model="officalFlag"
              active-color="#13ce66"
              @change="updateOffical"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </div>
      </div>

      <el-tabs v-model="tab" type="card">
        <el-tab-pane label="订单" name="1">
          <el-table :data="orderList">
            <el-table-column
              label="订单编号"
              align="center"
              prop="orderNum"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="时间"
              align="center"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="商品名称"
              align="center"
              prop="goodsName"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="规格" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.goodsStandard.desc }}</span>
              </template>
            </el-table-column>

            <el-table-column label="数量" align="center" prop="goodsNum"/>
            <el-table-column label="金额" align="center" prop="orderMoney"/>
            <el-table-column label="订单类型" align="center" prop="orderType">
              <template slot-scope="scope">
                <span>{{ scope.row.orderType | filterOrderType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" prop="orderStatus">
              <template slot-scope="scope">
                <span>{{ scope.row.orderStatus | filterOrderStatus }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewOrder('OrderDetail',scope.row.id)"
                >查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />-->
        </el-tab-pane>
        <el-tab-pane label="学校成绩" name="2">
          <div class="no-data" v-if="schoolGradesList.length ===0">暂无数据</div>
          <div v-else class="grades" v-for="(item,index) in schoolGradesList" :key="item.id">
            <span>{{ item.schoolName }}</span>
            <span>{{ item.className }}</span>&nbsp;&nbsp;
            <span>{{ item.grade.split(',').join(' ') }}</span>
            <span style="margin-left:30px;">总分:{{ item.grade | filterGrade }}</span>
            <el-divider v-if="index !==schoolGradesList.length-1"></el-divider>
          </div>
        </el-tab-pane>

        <el-tab-pane label="测评成绩" name="3">
          <el-table :data="gradesList">
            <el-table-column
              label="测评编号"
              align="center"
              prop="gradeNum"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="测评时间" align="center" prop="finishTime"/>
            <el-table-column label="提交时间" align="center" prop="createTime"/>
            <el-table-column label="测评状态" align="center" prop="gradeStatus">
              <template slot-scope="scope">
                <span>{{ scope.row.gradeStatus | filterGradeStatus }}</span>
              </template>
            </el-table-column>

            <!-- <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewOrder(null,scope.row.id)"
                >查看报告</el-button>
              </template>
            </el-table-column>-->
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="钱包" name="4">
          <div class="tab-money">
            <div class="item">
              <span>可用余额（元）</span>
              <h2>{{ info.currentMoney || 0 }}</h2>
            </div>
            <div class="item">
              <span>累积收入（元）</span>
              <h2>{{ info.totalMoney || 0 }}</h2>
            </div>
          </div>
          <div class="tab-title">
            <el-radio-group v-model="money.type">
              <el-radio-button :label="1">收入记录</el-radio-button>
              <el-radio-button :label="2">提现记录</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 收入记录 -->
          <el-table v-show="money.type === 1" :data="info.earnings">
            <el-table-column
              label="订单编号"
              align="center"
              prop="orderNum"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="时间"
              align="center"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="活动名称"
              align="center"
              prop="activityName"
              :show-overflow-tooltip="true"
            />

            <el-table-column label="用户手机号" align="center" prop="userPhone"/>
            <el-table-column label="收益金额" align="center" prop="earningMoney"/>

            <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewOrder('OrderDetail',scope.row.orderId)"
                >查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 提现记录 -->
          <el-table v-show="money.type === 2" :data="info.cashOuts">
            <el-table-column
              label="提现编号"
              align="center"
              prop="number"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status | filterStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="提现金额"
              align="center"
              prop="money"
              :show-overflow-tooltip="true"
            />

            <el-table-column label="收款账户" align="center" prop="account"/>
            <el-table-column label="申请时间" align="center" prop="createTime"/>

            <!-- <el-table-column
              label="操作"
              align="center"
              width="180"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="handleViewOrder(null,scope.row)"
                >查看</el-button>
              </template>
            </el-table-column>-->
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="测评设备码" name="5">
          <el-table :data="devicesList">
            <el-table-column label="设备码" align="center" prop="mac"/>
            <el-table-column label="设备型号" align="center" prop="model"/>
            <el-table-column label="测评次数" align="center" prop="number">
              <template slot-scope="scope">
                <el-button @click="openModal(scope.row.id)" type="text">{{ scope.row.number }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="最近测评时间" align="center" prop="updateTime"/>
          </el-table>
        </el-tab-pane>

        <el-dialog title="历史测评时间" :visible.sync="open" width="40%">
          <el-table :data="devicesTimeList">
            <el-table-column label="编号" align="center" type="index"/>
            <el-table-column
              label="时间"
              align="center"
              prop="testTime"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button @click="open = false">取 消</el-button>
            <el-button type="primary" @click="open = false">确 定</el-button>
          </span>
        </el-dialog>

        <el-tab-pane label="我的推广" name="6">
          <div class="tab-money">
            <div class="item">
              <span>可用余额（元）</span>
              <h2>{{ info.saleMoney || 0 }}</h2>
            </div>
            <div class="item">
              <span>今日收入（元）</span>
              <h2>{{ info.todayEarning || 0 }}</h2>
            </div>
            <div class="item">
              <span>累积收入（元）</span>
              <h2>{{ info.saleTotalEarning || 0 }}</h2>
            </div>
          </div>
          <div class="tab-title">
            <el-radio-group @change="tuiGuangTypeChage" v-model="money.tuiGuangType">
              <el-radio-button :label="1">邀请用户</el-radio-button>
              <el-radio-button :label="2">返佣明细</el-radio-button>
              <el-radio-button :label="3">提现记录</el-radio-button>
            </el-radio-group>
          </div>
          <div class="time-select">
            <el-date-picker
              v-model="date"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :picker-options="pickerOptions"
              @change="dateChange"
            ></el-date-picker>
          </div>
          <div v-show="money.tuiGuangType == 1">
            <div class="sub-title">
              <div>当月注册用户（人）: {{ invitation.currentMonthNum || 0 }}</div>
              <div style="margin-top:10px">累积注册用户（人）: {{ invitation.totalNum || 0 }}</div>
            </div>
            <el-table :data="invitation.invitationList">
              <el-table-column
                label="用户手机号"
                align="center"
                prop="phonenumber"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="用户购买行为" align="center" prop="buyFlag">
                <template slot-scope="scope">{{ scope.row.buyFlag ? '已购买' : '-' }}</template>
              </el-table-column>
              <el-table-column
                label="注册时间"
                align="center"
                prop="createTime"
                :show-overflow-tooltip="true"
              />
            </el-table>
          </div>

          <div v-show="money.tuiGuangType == 2">
            <div class="sub-title">
              <div>当月收入（元）: {{ returnMoney.currentMoney || 0 }}</div>
              <div style="margin-top:10px">当月消费用户（人）: {{ returnMoney.userNum || 0 }}</div>
            </div>

            <el-table :data="returnMoney.list">
              <el-table-column label="订单编号" align="center" prop="order.orderNum"/>
              <el-table-column label="时间" align="center" prop="createTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户手机号" align="center" prop="consumerUser.phonenumber">
                <template slot-scope="scope">
                  <span>{{ scope.row.consumerUser ? scope.row.consumerUser.phonenumber : '' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="收益金额" align="center" prop="money"/>
            </el-table>
          </div>

          <div v-show="money.tuiGuangType == 3">
            <div class="sub-title">
              <div>当月提现（元）: {{ sale.currentMonthMoney || 0 }}</div>
              <div style="margin-top:10px">累积提现（元）: {{ sale.totalMoney || 0 }}</div>
            </div>

            <el-table :data="sale.list">
              <el-table-column
                label="提现编号"
                align="center"
                prop="number"
                :show-overflow-tooltip="true"
              />
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.status | filterStatus }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="提现金额"
                align="center"
                prop="money"
                :show-overflow-tooltip="true"
              />

              <el-table-column width="300" label="收款账户" align="center" prop="account">
                <template slot-scope="scope">
                  <span>{{ scope.row.bankAlipay.name }}</span> &nbsp;&nbsp;
                  <span>{{ scope.row.bankAlipay.accountBank }}</span>&nbsp;&nbsp;
                  <span>{{ scope.row.bankAlipay.accountNo | filterBank }}</span>
                </template>
              </el-table-column>
              <el-table-column label="申请时间" align="center" prop="createTime"/>

              <!-- <el-table-column
                label="操作"
                align="center"
                width="180"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handleViewOrder(null,scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>-->
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="收货地址" name="7">
          <el-table :data="addressList">
            <el-table-column label="收件人" align="center" prop="consignee"/>
            <el-table-column label="电话" align="center" prop="phone"/>
            <el-table-column label="收货地址" align="center" #default="{row}">
              <div>{{ `${row.province}/${row.street}/${row.district}` }}</div>
              <div>{{ `${row.address}` }}</div>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="专家点评" name="8">
          <Editor  v-model="userInfo.expertReviews"/>
          <el-button style="position: absolute;right: 20px;bottom: 20px" type="primary" @click="savaZjDp">保存</el-button>
        </el-tab-pane>
        <el-tab-pane label="行动历史" name="10">
          <el-table :data="actionData">
            <el-table-column
              label="行动"
              align="center"
              prop="replyDesc"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="日期"
              align="center"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              prop="goodsName"
              :render-header="renderHeader"
            >
              <template slot-scope="scope">
                <el-button type="text" style="color: red" @click="delAction(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />-->
        </el-tab-pane>
        <el-tab-pane label="目标职业" name="11">
          <el-table :data="job">
            <el-table-column
              label="职业名称"
              align="center"
              prop="replyDesc"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="添加时间"
              align="center"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
          </el-table>

          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />-->
        </el-tab-pane>
        <el-tab-pane label="目标专业" name="12">
          <el-table :data="job">
            <el-table-column
              label="专业名称"
              align="center"
              prop="replyDesc"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="添加时间"
              align="center"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
          </el-table>

          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />-->
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!--    添加对话框-->
    <el-dialog
      title="添加用户行动历史"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form label-width="80px">
        <el-form-item label="行动名称">
          <el-input v-model="actionName" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            style="width: 300px"
            v-model="value1"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addAction">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>
<script>
import Editor from "@/components/Editor";
import Upload from "@/components/Upload";
import {
  getUser,
  getInvitationUserList,
  getReturnMoneyList,
  getSaleList,
  getDeviceTestRecord,
  getLegalNotice,
  getAllDevice, updateDiaryFlag
} from '@/api/system/user'
import { addUserHistory, delUserHistory, updateOfficalData, zjDp } from '../../../api/system/user'
import { delCommentReply } from '../../../api/system/CompassDiary'

export default {
  name: 'UserDetail',
  components:{
    Editor
  },
  data() {
    return {
      //是否为设置为官方标识
      officalFlag:false,
      /*日期选择器*/
      value1:"",
      //对话框显示与隐藏
      dialogVisible: false,
      //行动历史
      actionData: [],
      userInfo: {},
      expertReviews:"",
      Uid:"",
      actionName: '',
      pickerValue: '',
      textarea: '',
      switchValue: false,
      open: false,
      tab: '1',
      info: {},
      orderList: [],
      devicesList: [],
      devicesTimeList: [],
      schoolGradesList: [],
      gradesList: [],
      money: {
        list: [],
        type: 1,
        tuiGuangType: 1
      },
      date: null,
      pickerOptions: {
        shortcuts: [
          {
            text: '上一个月',
            onClick(picker) {
              const year = new Date().getFullYear()
              const month = new Date().getMonth() + 1
              const start = new Date(`${year}/${month - 1}/01 00:00:00`)
              const end = new Date(`${year}/${month}/01 00:00:00`)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '本月',
            onClick(picker) {
              const year = new Date().getFullYear()
              const month = new Date().getMonth() + 1
              picker.$emit('pick', [
                new Date(`${year}/${month}/01 00:00:00`),
                new Date()
              ])
            }
          },
          {
            text: '下一个月',
            onClick(picker) {
              const year = new Date().getFullYear()
              const month = new Date().getMonth() + 1
              const start = new Date(`${year}/${month + 1}/01 00:00:00`)
              const end = new Date(`${year}/${month + 2}/01 00:00:00`)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      invitation: {
        currentMonthNum: 0,
        invitationList: [],
        totalNum: 0
      },
      returnMoney: {
        currentMoney: 0,
        userNum: 0,
        list: []
      },
      sale: {},
      addressList: []
    }
  },
  filters: {
    filterGrade(value) {
      let arr = value.split(',')
      let totalScore = 0
      arr.forEach(item => {
        let score = item.split(':')
        totalScore += score[1] * 1
      })
      return totalScore
    },
    filterUserType(value) {
      return {
        1: '普通用户',
        2: '推广员'
      }[value]
    },
    filterOrderType(value) {
      return {
        1: '正常',
        2: '限时抢购',
        3: '拼团'
      }[value]
    },
    filterOrderStatus(value) {
      return {
        1: '待支付',
        2: '已支付',
        3: '已关闭',
        4: '已发货'
      }[value]
    },
    filterGradeStatus(value) {
      return {
        1: '未完成',
        2: '已完成'
      }[value]
    },
    filterFeedBackType(value) {
      return {
        1: '顾问咨询',
        2: '意见反馈'
      }[value]
    },
    filterStatus(value) {
      return {
        1: '待审批',
        2: '已通过',
        3: '已驳回',
        4: '已关闭'
      }[value]
    },
    filterBank(value) {
      // const reg = /^(\d{3})\d+(\d{4})$/;
      // value = value.replace(reg, "$1****$2");
      return value
    }
  },
  mounted() {
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1
    this.date = [new Date(`${year}/${month}/01 00:00:00`), new Date()]
    this.getEditInfo()
    this.getTuiGuangList()
    this.queryAllDevice()
    this.getUserData()
  },
  methods: {
    //更改官方标识
    updateOffical(){
      const id=this.$route.query.id
      updateOfficalData(id).then(res=>{
        this.$message.success('修改成功')
        this.getUserData()
      })
    },
    //删除行动历史记录
    delAction(row){
      const ids = row.id
      this.$confirm('是否确认删除评论日记管理编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delUserHistory(ids)
      }).then(() => {
        this.msgSuccess('删除成功')
        this.getUserData()
      }).catch(function() {
      })
    },
    //获取专家点评数据
    renderHeader(h) {
      return (
        <div>
          操作
          <el-button type="text" onClick={() => this.handleAddItem()} style="marginLeft:20px">添加</el-button>
        </div>
      )
    },
    //添加行动历史记录
    handleAddItem() {
      this.dialogVisible = true

    },
    openModal(id) {
      this.open = true
      getDeviceTestRecord({
        deviceId: id
      }).then(res => {
        this.devicesTimeList = res.data
      })
    },
    getUserData() {
      const uid = this.$route.query.id
      getUser(uid).then(res => {
        console.log(res)
        this.info = res.data
        this.officalFlag=res.data.officalFlag
        this.orderList = this.info.orders
        if(this.info.diaryFlag===1){
          this.switchValue=true
        }
        if(this.officalFlag=="1"){
          this.officalFlag=true
        }
        this.orderList = this.orderList.map(item => {
          item.goodsStandard = JSON.parse(item.goodsStandard)
          return item
        })
        this.schoolGradesList = this.info.schoolGrades
        this.gradesList = this.info.grades
        this.addressList = res.data.userAddressList
        this.actionData = res.data.userHistoryList
        this.userInfo=res.data
        this.expertReviews=res.data.expertReviews
      })
    },
    savaZjDp(){
      const uid = this.$route.query.id
      zjDp({
        classId:this.info.classId,
        expertReviews:this.userInfo.expertReviews,
        goalJob1: this.info.goalJob1,
        goalJob2: this.info.goalJob2,
        goalJob3: this.info.goalJob3,
        nickName: this.info.nickName,
        userId:uid
      }).then(res=>{
        this.$message.success("保存成功")
        console.log(res.data)
      })
    },
    //获取修改用户权限
    updateDiaryFlag(){
      const uid = this.$route.query.id
      let flag=0
      if(this.switchValue===true){
        flag=1
      }
      updateDiaryFlag(uid,flag).then(res=>{
        this.$message.success("修改成功")
      })

    },
    addAction(){
      const uid = this.$route.query.id
      addUserHistory({
        replyDesc:this.actionName,
        createTime:this.value1,
        uid:uid
      }).then(res => {
        this.getUserData()
        this.$message.success("添加成功")
        this.dialogVisible=false
      })
    },
    getEditInfo() {
      const id = this.$route.query.id
      if (id) {
        getUser(id).then(response => {
          this.info = response.data
          this.orderList = this.info.orders
          this.orderList = this.orderList.map(item => {
            item.goodsStandard = JSON.parse(item.goodsStandard)
            return item
          })
          this.schoolGradesList = this.info.schoolGrades
          this.gradesList = this.info.grades
          this.addressList = response.data.userAddressList
        })
      }
    },
    queryAllDevice() {
      const id = this.$route.query.id
      getAllDevice({ userId: id }).then(res => {
        this.devicesList = res.data
      })
    },

    getTuiGuangList(type) {
      const postData = this.date
        ? {
          userId: this.$route.query.id,
          startDate: this.filterDate(this.date[0], 'YYYY-MM'),
          endDate: this.filterDate(this.date[1], 'YYYY-MM')
        }
        : {
          userId: this.$route.query.id
        }
      getInvitationUserList(postData).then(res => {
        this.invitation = res.data
      })
    },
    getReturnMoney() {
      const postData = this.date
        ? {
          userId: this.$route.query.id,
          startDate: this.filterDate(this.date[0], 'YYYY-MM'),
          endDate: this.filterDate(this.date[1], 'YYYY-MM')
        }
        : {
          userId: this.$route.query.id
        }
      getReturnMoneyList(postData).then(res => {
        this.returnMoney = res.data
      })
    },
    getSale() {
      const postData = this.date
        ? {
          userId: this.$route.query.id,
          startDate: this.filterDate(this.date[0], 'YYYY-MM'),
          endDate: this.filterDate(this.date[1], 'YYYY-MM')
        }
        : {
          userId: this.$route.query.id
        }
      getSaleList(postData).then(res => {
        this.sale = res.data
      })
    },
    handleViewOrder(name, id) {
      if (name) {
        this.$router.push({
          name,
          query: {
            id
          }
        })
      }
    },
    tuiGuangTypeChage(value) {
      console.log(value)
      switch (value) {
        case 1:
          this.getTuiGuangList()
          break
        case 2:
          this.getReturnMoney()
          break
        case 3:
          this.getSale()
          break
      }
    },
    dateChange(value) {
      // const start = {
      //   year: new Date(value[0]).getFullYear(),
      //   month: new Date(value[0]).getMonth() + 1
      // };
      // const end = {
      //   year: new Date(value[1]).getFullYear(),
      //   month: new Date(value[1]).getMonth() + 1
      // };
      // const startDate = start.year + "-" + start.month;
      // const endDate = end.year + "-" + end.month;
      // if (startDate === endDate) {
      //   this.date = [new Date(`${start.year}/${start.month}/01`), new Date()];
      // }
      // console.log(value);
      this.tuiGuangTypeChage(this.money.tuiGuangType)
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  font-size: 14px;
  padding: 18px 0;

  span:first-child {
    width: 100px;
    display: inline-block;
    text-align: right;
  }

  span:last-child {
    margin-left: 20px;
    display: inline-block;
  }

  .image {
    width: 100px;
    height: 100px;
    margin-right: 20px;
  }
}

.deatil {
  display: flex;

  .avatar {
    width: 140px;
    height: 140px;
    margin-right: 20px;

    .img {
      height: 100%;
    }

    /deep/ img {
      border-radius: 50%;
    }
  }

  .info {
    flex: 1;
  }
}

.tab-title {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

.tab-money {
  display: flex;

  .item {
    width: 200px;
    text-align: center;

    span {
      font-size: 14px;
      font-weight: bold;
    }

    h2 {
      font-size: 20px;
      color: #1890ff;
    }
  }
}

.grades {
  margin: 20px 0;

  span:first-child {
    display: inline-block;
    margin-right: 20px;
  }
}

.time-select {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.sub-title {
  margin-bottom: 20px;
  font-weight: 500;
}

.no-data {
  text-align: center;
  color: #909399;
  font-size: 14px;
  line-height: 60px;
}
</style>
